'use strict';

import React, { Component } from 'react';

import {
  PixelRatio,
  StyleSheet,
  View,
  ScrollView,
  TouchableHighlight
} from 'react-native';

class List extends Component {
  static propTypes = {
    ... ScrollView.propTypes,
    onItemSelected: React.PropTypes.func
  }
  render() {
    return (
      <ScrollView 
        style={this.props.style}
        contentContainerStyle={this.props.contentContainerStyle}
        children={(this.props.children || []).map((child, index)=>{
          return (
            <TouchableHighlight key={index} onPress={ !this.props.onItemSelected ? undefined : ()=> this.props.onItemSelected ? this.props.onItemSelected(index) : undefined}>
            <View style={styles.list_item}>
              {!index ? undefined : <View style={styles.list_seperator}/>}
              {React.cloneElement(child)}
            </View>
            </TouchableHighlight>
          );
        })}
      />
    );
  }
}

const styles = StyleSheet.create({
  list_item: {
    alignSelf: 'stretch',
    backgroundColor: 'white',
    padding: 13
  },
  list_seperator: {
    height: 1/PixelRatio.get(),
    backgroundColor: '#00000033',
    marginTop: -13,
    marginBottom: 13
  }
});


export default List;